<template>
   <n-space vertical>
    <n-form
      ref="formRef"
      :model="model"
      label-placement="left"
      :label-width="160"
      class="setting-cont"
    >
      <n-form-item label="头像" >
        <UploadImg v-model="model.avatar"/>
      </n-form-item>
      <n-form-item label="账号" >
        <n-input v-model:value="model.username" disabled placeholder="Input" />
      </n-form-item>
      <n-form-item label="性别" >
        <n-select
          v-model:value="model.gender"
          placeholder="Select"
          :options="genderOptions"
        />
      </n-form-item>
      <n-form-item label="手机" >
        <n-input v-model:value="model.phone" placeholder="Input" />
      </n-form-item>
      
      <n-form-item label=" " >
        <n-button type="primary" size="medium" block @click="handleSetting">
          提交设置
        </n-button>
      </n-form-item>
      
    </n-form>
  </n-space>
</template>

<script setup>
import { ref } from 'vue';
import UploadImg from '../components/UploadImg.vue';
import { userUpdateApi } from '../api/user';
import { useAccount } from '../store/account';
const genderOptions = [
    {
      label: '女士',
      value: '1'
    },
    {
      label: '男士',
      value: '2'
    }
]
const model = ref({
  username:'',
  gender:'',
  phone:'',
  avatar:''
})
const formRef = ref()
const account = useAccount()
const handleSetting = async ()=>{
  console.log(model.value);
  let {_id} = account.userInfo
  let res = await userUpdateApi(_id,model.value)
  if(res.data.code==1){
    account.userInfo = {
      _id,
      ...model.value
    }
  }
}
let {username,gender,phone,avatar} = account.userInfo
model.value.username = username
model.value.gender = gender
model.value.phone = phone
model.value.avatar = avatar
</script>

<style lang="scss" scoped>
.setting-cont{
  padding-right: 140px;
}
</style>